<template>
  <view>
    <view v-for="(doctor, index) in doctors" :key="index" class="doctor-card">
      <view class="doctor-info" @click="toCreateAppointment(doctor.doctor_id,doctor.doctor_name)">
        <text class="doctor-name">{{ doctor.doctor_name }}</text>
        <text class="doctor-age">{{ doctor.years_of_experience }}年</text>
      </view>
      <view class="specialization">{{ doctor.expertise }}</view>
    </view>
  </view>
</template>

<script>
	import config from '@/config/config.js'; // 引入全局配置文件
export default {
  data() {
    return {
      doctors: [
      ]
    };
  },
  mounted() {
      this.getList();
    },
  methods: {
    async getList() {
          await uni.request({
        url: config.baseURL + `/doctors/getDoctors`,
        method: 'GET',
        success: (res) => {
          this.doctors = res.data.data
        },
        fail: () => {
          uni.showToast({
            title: '请求失败，请检查网络连接',
            icon: 'none'
          });
        },
        complete: () => {
          this.dataLoading = false; // 数据加载完成，隐藏加载提示
        }
      });
			
        },
        reList() {
          this.getList();
        },
		toCreateAppointment(doctor_id,doctor_name){
			let service_detail_id = 10
			uni.navigateTo({
						url: '/pages/booking/creatappointment/creatappointment?service_detail_id='+service_detail_id+'&doctor_id='+doctor_id+'&doctor_name='+doctor_name, // 参数在 URL 中使用 key=value 的形式传递
			});
		}
  }
};
</script>

<style>
.doctor-card {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
}

.doctor-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}

.doctor-name {
  font-weight: bold;
}

.specialization {
  background-color: #f0f0f0;
  padding: 5px;
  border-radius: 5px;
}
</style>
